<template>
  <el-dialog
  :title="title"
  @open='open'
  :visible.sync="visible"
  append-to-body
  custom-class='user-dialog'
  :width="option.dialogWidth || '60%'"
  :before-close="close">
    <el-form size='small' :model='form' ref='form'>
     <el-form-item
      v-for='item in column'
      :key='item.prop'
      :prop='item.prop'
      :label-width='(option.width || item.labelWidth || 80) +"px"'
      :label="item.label+ '：'"
      :rules='item.rules'>
        <el-input v-model="form[item.prop]" :placeholder='"请输入" + item.label'/>
      </el-form-item>
    </el-form>
    <div slot="footer" class="right">
      <el-button size='small' @click="close">取 消</el-button>
      <el-button size='small' type="primary" @click="confirm" :loading='loading'>确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    option: {
      type: Object,
      default: () => {
        return {}
      }
    },
    type: { // 对话框打开类型：view查看；edit编辑；add新增
      type: String,
      default: 'view'
    },
    disabled: { // 输入框是否禁用
      type: Boolean,
      default: true
    },
    detail: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data () {
    return {
      title: '详情',
      column: [],
      form: {},
      loading: false,
      forbidden: true
    }
  },
  
  methods: {
    open () {
      let column = [];
      if (this.type === 'view') {
        this.forbidden = true;
        this.title = '详情';
      } else {
        this.forbidden = false;
        this.title = this.type === 'add' ? '新增' : '编辑';
      }

      this.option.column.map(item => {
        item[`${this.type}`] !==false && (this.form[item.prop]= '', column.push(item), 0);
      });

      if (this.detail) {
        this.form = {...this.detail};
      }
      this.column = column;
    },
    close () {
      this.$emit('close');
      this.form = {};
      this.$refs.form.resetFields();
    },
    confirm () {
      this.loading = true;
      this.$refs.form.validate(valid => {
        if (valid) {
          if (this.option.close) {
            this.loading = false;
            this.close()
          }
          this.$emit(`${this.type}Row`, this.form, this.done, this.finish)
        } else {
          this.loading = false;
        }
      })
    },
    done () {
      this.loading = false;
      this.close();
    },
    finish () {
      this.loading = false;
    },
  }
}
</script>
